<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: zhaoziyin
 * @LastEditTime: 2022-09-12 11:48:33
-->
<template>
  <div>
    <Header></Header>

    <!-- 这时导航栏部分 -->
    <div class="nav">
      <div class="wrapper" style="1000px;margin: 0px auto;">
        <ul>
          <li @click="$router.push('/home')">首页</li>
          <li
            v-for="item in titleList"
            :key="item.id"
            @click="toNewsList(item.id, item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>

    <!-- 这是新闻内容部分 -->
    <div class="article_content">
      <div class="wrapper">
        <!-- 左半部分 -->
        <div class="left" @click="toDetails(latest_news.id)">
          <div class="left_title">
            <div class="h3">{{ name }}</div>
          </div>

          <div class="left_content">
            <h2>{{ latest_news.title }}</h2>
            <div class="news" v-html="latest_news.content">
              <!-- <div class="top" @click="toDetails()">
                西工大代表团在陕西省十七届运动会（大学生组）赛事中获...
              </div>
              <div class="middle">
                西工大新闻网8月13日电（赵慧娟）由陕西省人民政府主办，陕西省体育局、陕西省教育厅、榆林市人民政府承办的陕西省第十七届运动会于2022年7月在榆林市开赛。本届省运会首次将大学生组纳入比赛，其竞赛项目数量、参赛人员规模均为...
              </div> -->
              <!-- <div class="bottom">
                <div class="time">
                  <div class="details">详情&nbsp;+</div>
                  <span></span>
                </div>
              </div> -->
            </div>
          </div>

          <ul>
            <li
              v-for="item in columns"
              :key="item.id"
              @click="toDetails(item.id)"
            >
              <div class="date">
                <div class="day">22</div>
                <div class="year">2022-08</div>
              </div>
              <div class="news_text">
                <a href="#">{{ item.title }}</a>
                <p v-html="item.content"></p>
              </div>
            </li>
          </ul>
        </div>

        <!-- 右半部分 -->
        <div class="right">
          <div class="right_title">
            <div class="h3">校园动态</div>
            <div class="more">更多&nbsp;+</div>
          </div>
          <div class="right_content">
            <ul v-for="i in 2" :key="i">
              <li v-for="item in rightNews" :key="item">{{item.title}}</li>
            </ul>
          </div>
          <div class="video">
            <div class="right_title">
              <div class="h3">视频新闻</div>
              <div class="more">更多&nbsp;+</div>
            </div>
            <div class="video_content">
              <ul>
                <li><img src=".././assets/yxtx/1.jpeg" alt="">
                  <p>2021年03月12日</p>
                </li>
                <li><img src=".././assets/yxtx/8.png" alt="">
                  <p>2021年06月18日</p>
                </li>
                <li><img src=".././assets/yxtx//dsxx.png" alt="">
                  <p>2021年06月04日</p>
                </li>
                <li><img src=".././assets/yxtx/project1.jpg" alt="">
                  <p>2021年05月21日</p>
                </li>
              </ul>
            </div>
            <div class="video_list">
              <ul>
                <li>▷&nbsp;&nbsp;&nbsp;2021年04月16日第1111期</li>
                <li>▷&nbsp;&nbsp;&nbsp;2021年03月26日第1110期</li>
                <li>▷&nbsp;&nbsp;&nbsp;021年1月27日第1109期</li>
                <li>▷&nbsp;&nbsp;&nbsp;2020年11月19日第1105期</li>
                <li>▷&nbsp;&nbsp;&nbsp;2020年09月04日第1101期</li>
              </ul>
            </div>
            <div class="logo">
              <img src="../../src/assets/yxtx/weibo.png" alt="" />
              <img src="../../src/assets/yxtx/num.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import { get } from "@/utils/request";
export default {
  data() {
    return {
      leftList: [],
      titleList: [
        {
          id: 4,
          name: "工大要闻",
        },
        {
          id: 5,
          name: "校园动态",
        },
        {
          id: 6,
          name: "媒体工大",
        },
        {
          id: 7,
          name: "热点聚集",
        },
        {
          id: 3,
          name: "视频新闻",
        },
      ],
      classify: " ",
      newsList: [],
      name: " ",
      // 栏目信息
      columns: [],
      latest_news: " ",
      rightNews:[],
    };
  },
  // watch: {
  //   "$route.query": {
  //     handler() {
  //       this.name = this.$route.query.name;
  //       this.id = this.$route.query.id;
  //       this.getLeftList();
  //       // this.getArticleById();
  //     },
  //     deep: true,
  //   },
  // },
  methods: {
    // 跳转文章详情页面
    toDetails(id) {
      this.$router.push({
        path: "/List",
        query: { id },
      });
    },
    async getLeftList() {
      let params = { categoryId: 4 };
      let res = await get("/index/article/findHotArticles", params);
      this.latest_news = res.data[0];
      this.columns = res.data.splice(1);
      // console.log(this.columns);
    },
    // 根据点击栏目的id不同显示不同的栏目标题
    async toNewsList(id, name) {
      this.name = name;
      let params = { categoryId: id };
      let res = await get("/index/article/findHotArticles", params);
      this.latest_news = res.data[0];
      this.columns = res.data.splice(1);
    },
    async getRightNews(){
      let res = await get("/index/article/findHotArticles?categoryId=5")
      this.rightNews = res.data;
    },
  },
  created() {
    this.getLeftList();
    this.name = this.$route.query.name;
    this.getRightNews();
  },
};
</script>
<style lang="scss">
.nav {
  height: 47px;
  position: sticky;
  top: 0;
  background-color: white;
  .wrapper {
    // margin-top: 100px;
    ul {
      display: flex;
      justify-content: center;
      li {
        float: left;
        height: 47px;
        line-height: 47px;
        font-size: 18px;
        color: #333;
        padding: 0px 25px;
        margin: 0px 10px;
        font-family: "宋体";
        font-weight: bold;
      }
      li:hover {
        background-color: rgb(68, 145, 223);
        color: #fff;
      }
    }
  }
}

.article_content {
  background-color: aliceblue;
  .wrapper {
    width: 1000px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 650px;
      .left_title {
        width: 650px;
        height: 46px;
        border-bottom: 2px solid #00468e;
        .h3 {
          line-height: 44px;
          font-size: 30px;
          color: #00468e;
          font-family: "宋体";
        }
      }
      .left_content {
        width: 650px;
        margin-top: 30px;
        h2 {
          text-align: center;
        }
        .news {
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;
          height: 400px;
          overflow: scroll;
          width: 100%;
          font-family: "宋体";
          text-align: center;
          img {
            width: 70%;
          }
          .wrapper {
            width: 650px;
          }
          .footer {
            display: none;
          }
          .list-r {
            display: none;
          }
          // .top {
          //   width: 100%;
          //   height: 60px;
          //   font-size: 22px;
          //   color: #333;
          // }
          // .middle {
          //   width: 100%;
          //   height: 115px;
          //   color: #666;
          //   line-height: 23px;
          //   font-size: 12px;
          //   margin-bottom: 20px;
          // }
          .bottom {
            width: 330px;
            height: 28px;
            .details {
              width: 80px;
              height: 28px;
              background-color: red;
              color: #fff;
              text-align: center;
              margin-right: 10px;
              vertical-align: middle;
              line-height: 28px;
            }
          }
        }
      }
      ul {
        width: 650px;
        li {
          // width: 650px;
          // height: 100px;
          padding: 35px 0;
          // border: 1px solid #000;
          display: flex;
          justify-content: space-between;
          .date {
            width: 92px;
            height: 92px;
            background-color: rgb(54, 149, 239);
            .day {
              font-size: 30px;
              text-align: center;
              color: #fff;
              margin-top: 18px;
            }
            .year {
              font-size: 12px;
              text-align: center;
              color: #fff;
            }
          }
          .news_text {
            width: 650px;
            height: 85px;
            overflow: hidden; //多余的部分隐藏
            white-space: nowrap; //让文字强制一行显示
            text-overflow: ellipsis; //多余的部分显示省略号
            img {
              display: none !important;
            }
            a {
              color: #000;
              font-size: 16px;
              font-family: "宋体";
              font-weight: 700;
            }
            p {
              width: 520px;
              height: 60px;
              margin-top: 20px;
              color: #666;
              font-size: 14px;
              white-space: wrap; //让文字强制一行显示
            }
          }
        }
      }
    }
    .right {
      width: 300px;
      height: 1095px;
      .right_title {
        width: 300px;
        height: 48px;
        display: flex;
        justify-content: space-between;
        margin: 10px 0px 0px 0px;
        line-height: 45px;
        .h3 {
          font-size: 18px;
          color: #00486e;
        }
        .more {
          font-size: 12px;
          color: #000;
        }
      }
      .right_content {
        ul {
          width: 300px;
          height: 190px;
          padding: 20px 0px;
          border-top: 1px dashed #ccc;
          li {
            list-style: disc;
            width: 280px;
            // width: 300px;
            height: 30px;
            padding: 0px 0px 0px 15px;
            overflow: hidden; //多余的部分隐藏
            white-space: nowrap; //让文字强制一行显示
            text-overflow: ellipsis; //多余的部分显示省略号
            img {
              display: none;
            }
          }
        }
      }
      .video_content {
        width: 320px;
        height: 246px;
        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li {
            height: 110px;
            // margin: 10px 10px 0 0;
            img{
            width: 145px;
            height: 90px;
            }
            p{
              font-size: 12px;
              color: #333;
              margin: 0;
            }
          }
        }
      }
      .video_list {
        ul {
          height: 220px;
          li {
            width: 300px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            padding: 0 0 0 30px;
          }
          li:hover{
            cursor: pointer;
          }
        }
      }
      .logo {
        img {
          width: 300px;
        }
      }
    }
  }
}
</style>